import { Avatar, Badge, Button, Card, Modal, Space, Table, Typography } from "antd"
import { useState } from "react";
import { ShiftDetailModal } from "./ShiftDetailModal";

const mockShiftChangeRequests = [
  {
    id: '1',
    doctor: '赵员工',
    doctorAvatar: 'https://picsum.photos/id/91/40/40',
    originalTime: '9月14日 上午班',
    requestedTime: '9月15日 上午班',
    reason: '个人事务',
    requestTime: '2025-09-12 09:23',
    status: 'pending'
  },
  {
    id: '2',
    doctor: '陈员工',
    doctorAvatar: 'https://picsum.photos/id/64/40/40',
    originalTime: '9月14日 下午班',
    requestedTime: '9月16日 下午班',
    reason: '预约冲突',
    requestTime: '2025-09-12 14:15',
    status: 'approved'
  }
];

//申请调班列表
export const ChangeArrange=()=>{
    const [shiftRequests] = useState(mockShiftChangeRequests);
     const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
  const [currentDetailData, setCurrentDetailData] = useState(null);
const handleCancel=()=>{
    setIsDetailModalVisible(false);
}
     // 调班申请表格列定义
  const columns = [
    {
      title: '申请人',
      dataIndex: 'doctor',
      key: 'doctor',
      width: '15%',
      render: (text, record) => (
        <div className="flex items-center gap-2">
          <Avatar src={record.doctorAvatar} alt={text} size="small" />
          <span className="text-gray-800">{text}</span>
        </div>
      )
    },
    {
      title: '原排班时间',
      dataIndex: 'originalTime',
      key: 'originalTime',
      width: '20%',
    },
    {
      title: '申请调至时间',
      dataIndex: 'requestedTime',
      key: 'requestedTime',
      width: '20%',
    },
    {
      title: '申请时间',
      dataIndex: 'requestTime',
      key: 'requestTime',
      width: '18%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '12%',
      render: (status) => {
        const statusConfig = {
          pending: { color: 'orange', text: '待审核' },
          approved: { color: 'green', text: '已批准' },
          rejected: { color: 'red', text: '已拒绝' }
        };
        const { color, text } = statusConfig[status] || statusConfig.pending;
        return <Badge status={color} text={text} />;
      }
    },
    {
      title: '操作',
      key: 'action',
      width: '15%',
      render: (_, record) => (
        <Space size="small">
          {record.status === 'pending' ? (
            <>
              <Button size="small" type="primary" onClick={() => handleShiftRequestAction(record.id, 'approve')}>
                批准
              </Button>
              <Button size="small" danger onClick={() => handleShiftRequestAction(record.id, 'reject')}>
                拒绝
              </Button>
            </>
          ) : (
            <Button size="small" onClick={() => {
              setCurrentDetailData(record);
              setIsDetailModalVisible(true);
            }}>
              查看详情
            </Button>
          )}
        </Space>
      ),
    },
  ];
  const handleShiftRequestAction = (id, action) => {
    message.success(action === 'approve' ? '已批准' : '已拒绝');
  };

    return <>
    <div>
           <Card style={{ marginTop: 10 }} className="shadow-md overflow-hidden">
            <div className="p-4 border-b border-gray-200 flex justify-between items-center">
              <Typography.Title level={5} className="text-secondary m-0">调班申请</Typography.Title>
            </div>
            <div>
              <Table
                dataSource={shiftRequests}
                columns={columns}
                pagination={false}
                rowKey="id"
                rowClassName="hover:bg-gray-50 transition-colors duration-200"
                style={{ width: '100%' }}
              />
            </div>
          </Card>

             {/* 调班详情模态框 */}
          <Modal
            title="调班详情"
            open={isDetailModalVisible}
            onCancel={handleCancel}
            footer={[
              <Button key="cancel" onClick={handleCancel}>取消</Button>
            ]}
            width={500}
          >
            <ShiftDetailModal data={currentDetailData}></ShiftDetailModal>
          </Modal>

    </div>
    </>
}